<template>
  <div class="operVideo">

    <div class="func-block" @click="searchVideoDialog = true">
      <el-button type="warning" plain icon="el-icon-search">精准筛选</el-button>
    </div>

    <div class="func-block" @click="getVideoList()">
      <el-button type="primary">清除筛选</el-button>
    </div>

    <el-table v-loading="loading" :data="videoList">
      <el-table-column prop="videoId" key="videoId" label="视频ID" width="150" align="center">
      </el-table-column>

      <el-table-column prop="videoTitle" key="videoTitle" label="视频标题" width="150" align="center">
      </el-table-column>

      <el-table-column prop="nickname" key="nickname" label="视频作者" width="150" align="center">
      </el-table-column>

      <el-table-column prop="videoType" key="videoType" label="视频类型" width="100" align="center">
      </el-table-column>

      <el-table-column prop="playCount" key="playCount" label="视频播放量" width="100" align="center">
      </el-table-column>

      <el-table-column prop="commentCount" key="commentCount" label="评论数量" width="100" align="center">
      </el-table-column>

      <el-table-column prop="isHide" key="isHide" label="视频状态" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isHide == 0">显示</span>
          <span v-else>隐藏</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" key="status" label="审核状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">审核中</el-tag>
          <el-tag type="success" v-else-if="scope.row.status == 1">审核通过</el-tag>
          <el-tag type="danger" v-else>审核不通过</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="发布时间" width="200" align="center">
        <template slot-scope="scope">
          {{
            scope.row.publishTime | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}
        </template>
      </el-table-column>

      <el-table-column label="修改时间" width="200" align="center">
        <template slot-scope="scope">
          {{
            scope.row.modifyTime | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button class="tableButton" @click="getVideoDetail(scope.row.videoId)" type="primary" size="small">查看
          </el-button>
          <el-button class="tableButton" @click="openUpdateForm(scope.row.videoId)" type="success" size="small">编辑
          </el-button>
          <el-button class="tableButton" @click="handleDelete(scope.row.videoId)" type="danger" size="small">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 每页5条 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getVideoList" />

    <!-- 查看详情 -->
    <el-dialog title="视频详情" :visible.sync="dialogDetailVisible">
      <div class="video-detail-block">
        <div class="video-img">
          <el-image style="width: 300px; height: 150px; margin-bottom: 20px"
            :src="videoDetail.videoInfo.thumbnail"></el-image>
        </div>

        <div class="video-main-detail">
          <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item label="视频标题">{{
              videoDetail.videoInfo.videoId
            }}</el-descriptions-item>
            <el-descriptions-item label="视频简介">{{ videoDetail.videoInfo.introduction }}
            </el-descriptions-item>
            <el-descriptions-item label="视频作者">{{ videoDetail.videoInfo.nickname }}
            </el-descriptions-item>
            <el-descriptions-item label="作者帐号">{{ videoDetail.videoInfo.account }}
            </el-descriptions-item>
            <el-descriptions-item label="视频标签" :span="4">
              <div style="display: inline-block; margin: 0 5px 0 5px;"
                v-for="(label, i) in videoDetail.videoInfo.labelList" :key="i">
                <el-tag class="video-label">{{ label }}</el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="视频类型">{{
              videoDetail.videoInfo.videoType
            }}</el-descriptions-item>
            <el-descriptions-item label="评论数量">{{ videoDetail.videoInfo.commentCount }}
            </el-descriptions-item>
            <el-descriptions-item label="播放量">{{ videoDetail.videoInfo.playCount }}
            </el-descriptions-item>
            <el-descriptions-item label="发布时间">
              {{
                videoDetail.videoInfo.publishTime
                | dateFormat("yyyy-mm-dd hh:mm:ss")
              }}
            </el-descriptions-item>
            <el-descriptions-item label="修改时间">
              {{
                videoDetail.videoInfo.modifyTime
                | dateFormat("yyyy-mm-dd hh:mm:ss")
              }}
            </el-descriptions-item>
            <el-descriptions-item label="视频状态">
              <span v-if="videoDetail.videoInfo.isHide == 0">显示</span>
              <span v-else>隐藏</span>
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">
              <el-tag v-if="videoDetail.videoInfo.status == 0">审核中</el-tag>
              <el-tag type="success" v-else-if="videoDetail.videoInfo.status == 1">审核通过</el-tag>
              <span v-else>审核不通过</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑视频 -->
    <el-dialog title="编辑视频" :visible.sync="dialogFormVisible">
      <el-form ref="updateVideoForm" :model="updateVideoForm" label-width="70px">
        <el-form-item label="视频状态" prop="isHide">
          <el-switch style="display: inline-block" v-model="updateVideoForm.isHide" :active-value="'0'"
            :inactive-value="'1'" active-text="显示" inactive-text="隐藏">
          </el-switch>
        </el-form-item>

        <el-form-item label="审核状态" prop="status">
          <el-switch style="display: inline-block" v-model="updateVideoForm.status" :active-value="'1'"
            :inactive-value="'2'" active-text="审核通过" inactive-text="审核未通过">
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button :loading="updateLoading" type="success" v-on:click="submitUpdateForm()">
            <span v-if="!updateLoading">修 改</span>
            <span v-else>修 改 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="筛选查询" :visible.sync="searchVideoDialog" width="40%" center>
      <el-form ref="searchVideoForm" :model="searchVideoForm" label-width="80px">
        <el-form-item label="视频编号">
          <el-input v-model="searchVideoForm.videoId"></el-input>
        </el-form-item>
        <el-form-item label="视频标题">
          <el-input v-model="searchVideoForm.videoTitle"></el-input>
        </el-form-item>
        <el-form-item label="视频作者">
          <el-input v-model="searchVideoForm.author"></el-input>
        </el-form-item>
        <el-form-item label="视频类型">
          <el-select v-model="searchVideoForm.videoType" placeholder="请选择视频类型">
            <el-option v-for="item in videoTypeOpt" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-select v-model="searchVideoForm.isHide" placeholder="请选择是否隐藏">
            <el-option v-for="item in isHideOpt" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频状态">
          <el-select v-model="searchVideoForm.status" placeholder="请选择视频状态">
            <el-option v-for="item in videoStatusOpt" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择起始日期" v-model="searchVideoForm.publishStartDate"
              style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
          <el-col style="text-align: center;" :span="1">-</el-col>
          <el-col :span="8">
            <el-date-picker placeholder="选择截至日期" v-model="searchVideoForm.publishEndDate" style="width: 100%;"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="修改时间">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择起始日期" v-model="searchVideoForm.modifyStartDate"
              style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
          <el-col style="text-align: center;" :span="1">-</el-col>
          <el-col :span="8">
            <el-date-picker placeholder="选择截至日期" v-model="searchVideoForm.modifyEndDate" style="width: 100%;"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="searchVideoDialog = false">取 消</el-button>
        <el-button type="warning" @click="searchVideo()">查 询</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getVideoTableData,
  getVideo,
  modifyVideo,
  deleteVideo,
} from "@/api/video";
import { Message } from "element-ui";

export default {
  name: "operVideo",

  data() {
    return {

      searchVideoDialog: false,
      searchVideoForm: {
        videoId: '',
        videoTitle: '',
        author: '',
        videoType: '',
        isHide: '',
        status: '',
        publishStartDate: '',
        publishEndDate: '',
        modifyStartDate: '',
        modifyEndDate: ''
      },

      videoTypeOpt: [
        {
          label: '电影',
          value: '电影'
        },
        {
          label: '电视剧',
          value: '电视剧'
        },
        {
          label: '动画',
          value: '动画'
        },
        {
          label: '动漫',
          value: '动漫'
        },
        {
          label: '生活',
          value: '生活'
        },
        {
          label: '音乐',
          value: '音乐'
        },
        {
          label: '游戏',
          value: '游戏'
        },
        {
          label: '舞蹈',
          value: '舞蹈'
        },
        {
          label: '其它',
          value: '其它'
        }
      ],

      isHideOpt: [{
        value: '1',
        label: '隐藏'
      },
      {
        value: '0',
        label: '显示'
      }],

      videoStatusOpt: [{
        value: '0',
        label: '未审核'
      },
      {
        value: '1',
        label: '审核通过'
      },
      {
        value: '1',
        label: '审核不通过'
      }],

      videoList: null,
      search: "",
      dialogDetailVisible: false,
      dialogFormVisible: false,

      menuList: [],

      updateVideoForm: {
        videoInfo: {
          video_img: "",
          video_title: "",
          video_introduction: "",
          deleted: 0,
        },
      },

      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0,

      videoDetail: {
        videoInfo: {},
      },

      loading: false,
      updateLoading: false,
    };
  },

  created() {
    this.loading = true;
    this.getVideoList();
  },

  methods: {

    searchVideo() {
      this.searchVideoDialog = false
      this.loading = true;
      this.getVideoList();
      this.searchVideoForm = Object.assign({}, {
        videoId: '',
        videoTitle: '',
        author: '',
        videoType: '',
        isHide: '',
        status: '',
        publishStartDate: '',
        publishEndDate: '',
        modifyStartDate: '',
        modifyEndDate: ''
      })
    },

    getVideoList() {
      getVideoTableData(this.queryParams, this.searchVideoForm).then((res) => {
        this.loading = false;
        this.videoList = res.rows;
        this.total = res.total;
      });
    },

    getVideoDetail(vid) {
      getVideo(vid).then((res) => {
        this.dialogDetailVisible = true;
        this.videoDetail.videoInfo = res.data;
      });
    },

    openUpdateForm(vid) {
      getVideo(vid).then((res) => {
        this.dialogFormVisible = true;
        this.updateVideoForm = res.data;
      });
    },

    submitUpdateForm() {
      modifyVideo(this.updateVideoForm).then((res) => {
        Message.success("修改成功");
        this.updateLoading = false;
        this.dialogFormVisible = false;
        this.getVideoList();
      });
    },

    handleDelete(vid) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteVideo(vid).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getVideoList();
        });
      });
    }
  },

  filters: {
    dateFormat: function (val, args) {
      if (val) {
        var dt = new Date(val);
        var year = dt.getFullYear();
        var month = ("0" + (dt.getMonth() + 1)).slice(-2);
        var day = ("0" + dt.getDate()).slice(-2);
        if (args.toLowerCase() === "yyyy-mm-dd") {
          return year + "-" + month + "-" + day;
        } else {
          var hour = ("0" + dt.getHours()).slice(-2);
          var min = ("0" + dt.getMinutes()).slice(-2);
          var sec = ("0" + dt.getSeconds()).slice(-2);
          return (
            year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
          );
        }
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.func-block {
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 20px;
}

.tableButton {
  margin-right: 15px;
}

.video-detail-block {
  text-align: center;
}

.video-label {
  margin-right: 5px;
}

.update-video-img-button {
  margin-left: 20px;
  width: 100px;
  height: 50px;
}
</style>
